<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Exceed - Responsive Bootstrap Template</title>

    <!-- stylesheets -->
    <link rel="stylesheet" type="text/css" href="/bootstrap/css/common.css"/>
    <!-- ZUI 标准版压缩后的 CSS 文件 -->
    <link rel="stylesheet" href="//cdn.bootcss.com/zui/1.9.1/css/zui.min.css">
    <!-- ZUI Javascript 依赖 jQuery -->
    <script src="//cdn.bootcss.com/zui/1.9.1/lib/jquery/jquery.js"></script>
    <!-- ZUI 标准版压缩后的 JavaScript 文件 -->
    <script src="//cdn.bootcss.com/zui/1.9.1/js/zui.min.js"></script>

    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/font-awesome.css" rel="stylesheet">
    <link href="/css/ionicons.css" rel="stylesheet">
    <!-- <link href="css/linea.css" rel="stylesheet"> -->
    <link href="/css/owl.carousel.css" rel="stylesheet">
    <link href="/css/style.css" rel="stylesheet">

    <link rel="stylesheet" type="text/css" href="/css/style2.css" />
    <script type="text/javascript" src="/js/modernizr.custom.28468.js"></script>

    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200i,300,300i,400,600,700,700i,900" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Cardo:400,400i,700" rel="stylesheet">
</head>
<body>
<!-- navbar -->
<header>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container nav-search">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="index">Exceed</a>


            </div>
            <div id="navbar" class="navbar-collapse collapse nav-top">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="index">首页</a></li>
                    <li><a href="articleSort">文章</a></li>
                    <li  th:if="${session.name==null}"><a href="contact">登录|注册</a></li>
                    <li  th:if="${session.name!=null}"><a class="iconfont icon-wodexuanzhong" th:text="${session.name}" href="contact"></a></li>

                    <li><a href="about">关于我们</a></li>
                </ul>
            </div>
            <div class="search-top">
                <div class="input-group">
                    <div class="input-control search-box search-box-circle has-icon-left has-icon-right search-example" id="searchboxExample">
                        <input id="inputSearchExample3" type="search" class="form-control search-input" placeholder="搜索">
                        <label for="inputSearchExample3" class="input-control-icon-left search-icon"><i class="icon icon-search"></i></label>
                    </div>
                    <span class="input-group-btn">
								<button class="btn btn-primary" type="button" style="height: 34px;">搜索</button>
							</span>
                </div>
            </div>
        </div>
    </nav>
</header>
<!-- header -->
<section class="header">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="intro">


                </div>
            </div>
        </div>
    </div>
</section>

<!-- 分页显示文章-->
<section class="">
    <div class="container">
        <!-- card -->

        <div class="col-md-4 col-sm-6" th:if="${search.total>0}" th:each="article1:${search.list}">
            <div class="caption-img">
                <div class="blog-img-overlay">
                    <!--<img class="img-responsive" src="/images/blog-slider1.jpg" alt=""/>-->
                    <img  class="img-responsive" th:if="${not #strings.isEmpty(article1.img)}" th:src="${article1.img}"  style="height: 250px" >
                    <img class="img-responsive" th:if="${#strings.isEmpty(article1.img)}" src="/images/blog-slider1.jpg" style="height: 250px">
                    <div style="color: white">
                        <h4><span>作者:</span><span th:text="${article1.author}"></span></h4>
                        <h4><span>上传时间:</span><span th:text="${article1.postTime}"></span></h4>
                        <h4><span>更新时间:</span><span th:text="${article1.updataTime}"></span></h4>
                        <!-- <h4 th:text="${#strings.abbreviate(article.text.split('</p>')[0].split('>')[1],50)}"></h4>-->
                    </div>
                </div>
                <div class="caption-tag">
                    <h3 th:text="${article1.title}"></h3>
                    <ul class="list-inline blog-comment">
                        <li><i class="icon icon-basic-message" style="color: #1B50B2">阅读15</i></li>
                        <li><i class="icon icon-basic-heart" style="color: #1B50B2">评论15</i></li>
                        <li class="pull-right"><i class="icon icon-basic-spread"></i><a class="goDetail" th:value="${article1.id}">阅读正文</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-md-offset-3" th:if="${search.total>0}">
            <ul class="list-inline pages text-center">
                <!--<li class="goPre" th:value="${s}"><i class="icon ion-ios-arrow-thin-left"></i></li>-->
                <!--<span>第</span><li class="getPage" th:value="${frontPage}" th:text="${frontPage}"></li><span>页</span>-->
                <!--<span>共</span><li class="getTotal" th:value="${pages}" th:text="${pages}"></li><span>页</span>-->
                <!--<li class="goNext" th:value="${sortId}"><i class="icon ion-ios-arrow-thin-right " ></i></li>-->
            </ul>
        </div>
    </div>
</section>

<!-- footer -->
<footer class="footer">
    <div class="container">
        <div class="row">
            <div class="col-md-2  col-sm-3 col-xs-6">
                <div class="footer-logo">
                    <div class="footer-logo-text">Exceed</div>
                    <p>Powered By Download Manager</p>
                </div>
            </div>
            <div class="col-md-2 col-sm-3 col-xs-6">
                <h3>Links</h3>
                <ul class="list-unstyled links">
                    <li>About</li>
                    <li>Services</li>
                    <li>History</li>
                    <li>Contact Us</li>
                </ul>
            </div>
            <div class="col-md-2 col-sm-3 col-xs-6">
                <h3>Pages</h3>
                <ul class="list-unstyled links">
                    <li>About</li>
                    <li>Services</li>
                    <li>History</li>
                    <li>Contact Us</li>
                </ul>
            </div>
            <div class="col-md-2 col-sm-3 col-xs-6">
                <h3>Legal</h3>
                <ul class="list-unstyled links">
                    <li>About</li>
                    <li>Services</li>
                    <li>History</li>
                    <li>Contact Us</li>
                </ul>
            </div>
            <div class="col-md-2 col-sm-3 col-xs-6">
                <h3>Social</h3>
                <ul class="list-unstyled links">
                    <li><i class="ion ion-social-facebook"></i>facebok</li>
                    <li><i class="ion ion-social-twitter"></i>Twitter</li>
                    <li><i class="ion ion-social-linkedin"></i>Linkedin</li>
                    <li><i class="ion ion-social-googleplus"></i>Google+</li>
                </ul>
            </div>
            <div class="col-md-2 col-sm-3 col-xs-6">
                <h3>Contact</h3>
                <ul class="list-unstyled links">
                    <li>554A, Comflare </li>

                    <li>Avenue</li>
                    <li>01234 567 890</li>
                    <li>hi@comflare.com</li>
                </ul>
            </div>
        </div>
        <hr>
        <div class="row">
            <div class="col-md-12">
                <div class="copyright">

                    <p class="text-center" >&copy;Designed By Scripteden 2016 / More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>
                    <!--ul class="list-inline pull-right">
                        <li>Privacy Policy </li>
                        <li>Terms Of Use</li>
                    </ul-->
                </div>
            </div>
        </div>
    </div>
</footer>

<!-- javascript -->
<script src="/js/jquery-v1.11.3.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
<script src="/js/owl.carousel.js"></script>
<script src="/js/isotope.pkgd.js"></script>
<script type="text/javascript" src="/js/jquery.cslider.js"></script>
<script src="/js/custom.js"></script>
</body>
<script>
    let page=$(".getPage").attr("value");
    let total=$(".getTotal").attr("value");
    //let total=
    $(".goDetail").click(function(){
        $(this).attr("value");
        location.href="detail?id="+ $(this).attr("value");
        console.log($(this).attr("value"));
    });
    /*上一页*/
    $(".goPre").click(function () {
        if(page>1) {
            page--;
            location.href = "articlePage?page=" + page + "&size=6&sortId=" + $(this).attr("value");
        }

    })
    /*下一页*/
    $(".goNext").click(function () {
        if (page<total) {
            page++;
            location.href="articlePage?page="+page+"&size=6&sortId="+$(this).attr("value");
            $(this).attr("value");
        }
    })

</script>
</html>